<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />		
		<meta name="author" content="朱三元" />
		<meta name="last-edit" content="2021.1.20" />
		<title>浮动粘性一级导航菜单</title>
		<style type="text/css">
      #logo{
        width: 100%;
        height: 100px;
        background-size: 100%;
      }
      .clear{
        clear: both;
      }
      #menu {
        top: 0px;
      }
      #menu ul{
        display: inline-flex;
        flex-direction: row;
      }
			#menu ul li{
        padding: 0;
        margin: 0;
        list-style: none;
      }
      #menu ul li a{
        width: 80px;
        display: block;
        margin: 0 1px 0 0;
        padding: 4px 10px;
        background-color: #5970b2;
        color: #fff;
        text-align: center;
        text-decoration: none;
      }
      #menu ul li a:hover{
        background-color: #49a3ff;
      }
		</style>
	</head>
  <body>
    <div id="logo"></div>
    <div id="menu">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="news.html">新闻</a></li>
        <li><a href="sports.html">体育</a></li>
        <li><a href="finance.html">财经</a></li>
        <li><a href="entertainment.html">娱乐</a></li>
        <li><a href="technology.html">科技</a></li>
        <li><a href="blog.html">博客</a></li>
        <li><a href="picture.html">图片</a></li>
        <li><a href="column.html">专栏</a></li>
        <li><a href="broadcast.html">直播</a></li>	
      <ul>
      <div class="clear"></div>
    </div>
    <div id="content">
      这是首页的内容。。。。。。。。
    </div>
  </body>

</html>